<template>
<!-- 六宫格列表 -->
  <div class="index-wrap">
        <h5> <i class="l-ico" style="background-image: url(//livewebbs2.msstatic.com/huya_hot_rec_theme_logo_1530671178.png)"></i>全部直播</h5>
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-6"  v-for="item in arrs">
		            <a href="#">
		                <img class="mui-media-object" v-lazy="item.url">
		                <div class="mui-media-body">{{item.name}}</div></a>
                        <div class="info clearfix">
                        <span class="nick">CFM中越对抗赛</span>
                        <div class="viewer-wrap">
                                <i class="viewer-icon"></i>
                                <span class="viewer-count">71.8万</span>
            </div>
        </div>
                        </li>
		    </ul>  
  </div>
</template>
<script>
import  Vue from 'vue'
import  VueResource from 'vue-resource'

// 使用方法1:

Vue.use(VueResource)

export default {
  name: 'index',
  data(){
      return{
              arrs:[]
      }
  },
    created(){
   this. getLunbotu();
//    this.getList();
 },
    methods: {
 getLunbotu(){
          this.$http.get('../../../static/json/sow.json'). then(result => {
              this.arrs = result.body.links
              console.log(this.arrs)
          })
      },
      
    },
  components:{
 
  }
}
</script>
<style>
.index-wrap{
    background:#ffffff;
}
h5, .mui-h5 {
    font-size: 20px;
    font-weight: normal;
    color: black;
       background-color: #ffffff;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
    width: 67%;
    max-width: 100%;
    height: auto;
}
 .l-ico {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 2px;
    background-size: 100% 100%;
    background-color: transparent;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}
 .info {
    color: #999;
    padding: 3px;
    height: 13px;
    line-height: 13px;
    font-size: 11px;
}
.info .nick {
    float: left;
    max-width: 40%;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    word-break: normal;
}
 .info .viewer-wrap {
    float: right;
}
 .info .viewer-wrap .viewer-icon {
    float: left;
    margin-top: -1px;
    width: 11px;
    height: 11px;
    background: url();
    background-size: 100%;
}
 .info .viewer-wrap .viewer-count {
    float: left;
    padding-left: 3px;
}
</style>